<template>
  <a-form ref="formRef" :model="form" :rules="rules" layout="vertical">
    <a-row :gutter="20">
      <a-col :span="6">
        <a-form-item name="wtSumId">
          <template #label>
            <span>
              汇总单号
              <a-tooltip v-if="false">
                <template #title></template>
                <QuestionCircleOutlined />
              </a-tooltip>
              <span>：</span>
            </span>
          </template>
          <a-select
            :showSearch="true"
            :disabled="false"
            v-model:value="form.wtSumId"
            placeholder="汇总单号"
            :options="prWeightSumOrderList"
            @change="handleChangewtSumId"
          />
        
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item name="">
          <template #label>
            <span>
              汇总重量
              <a-tooltip v-if="false">
                <template #title></template>
                <QuestionCircleOutlined />
              </a-tooltip>
              <span>：</span>
            </span>
          </template>
          <a-input-number v-model:value="form.weight"  style="width: 100%"  disabled :precision="2" allow-clear placeholder="请输入" />           
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item name="forecastQnetar">
          <template #label>
            <span>
              预报热值
              <a-tooltip v-if="false">
                <template #title></template>
                <QuestionCircleOutlined />
              </a-tooltip>
              <span>：</span>
            </span>
          </template>
          <a-input-number v-model:value="form.forecastQnetar" disabled style="width: 100%" allow-clear placeholder="请输入预报热值" />           
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item name="forecastStd">
          <template #label>
            <span>
              预报干基硫分
              <a-tooltip v-if="false">
                <template #title></template>
                <QuestionCircleOutlined />
              </a-tooltip>
              <span>：</span>
            </span>
          </template>
          <a-input-number v-model:value="form.forecastStd" disabled style="width: 100%" allow-clear placeholder="请输入预报干基硫分" />           
        </a-form-item>
      </a-col>
       
      <a-col :span="12">
        <a-form-item name="notdidWeight">
          <template #label>
            <span>
              未分量
              <a-tooltip v-if="false">
                <template #title></template>
                <QuestionCircleOutlined />
              </a-tooltip>
              <span>：</span>
            </span>
          </template>
          <a-input-number v-model:value="form.notdidWeight" disabled  :precision="2" style="width: 100%"  allow-clear placeholder="请输入" />           
        </a-form-item>
      </a-col>
      <a-col :span="12">
        <a-form-item name="">
          <template #label>
            <span>
              已分量
              <a-tooltip v-if="false">
                <template #title></template>
                <QuestionCircleOutlined />
              </a-tooltip>
              <span>：</span>
            </span>
          </template>
          <a-input-number v-model:value="form.didWeight"  disabled :precision="2" style="width: 100%" allow-clear placeholder="请输入" />           
        </a-form-item>
      </a-col>
      <a-col :span="24">
        <a-divider>分摊煤量</a-divider>
        <a-button type="primary" class="border-radius" @click="handleAddRow"><plus-outlined />新增</a-button>
      </a-col>
    </a-row>

  <a-row v-for="(item,index) in form.coalQuantitys" :key="index" >
      <a-col :span="6">
        <a-form-item name="managerCode">
          <template #label>
            <span>
              区域
              <a-tooltip v-if="false">
                <template #title></template>
                <QuestionCircleOutlined />
              </a-tooltip>
              <span>：</span>
            </span>
          </template>
          <!-- <dict-select v-model:value="item.ManagerCode" valueType="dictId" dictTypeId="1348235720908619811" placeholder="请选择" />      -->
          <a-select
            :showSearch="true"
            :disabled="false"
            v-model:value="item.managerCode"
            placeholder="区域"
            :options="managerCodeList"
           
          />
       
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item name="layerCode">
          <template #label>
            <span>
              层高
              <a-tooltip v-if="false">
                <template #title></template>
                <QuestionCircleOutlined />
              </a-tooltip>
              <span>：</span>
            </span>
          </template>
          <!-- <dict-select v-model:value="item.LayerCode" valueType="dictId" dictTypeId="1348235720908619811" placeholder="请选择" />             -->
        
          <a-select
            :showSearch="true"
            :disabled="false"
            v-model:value="item.layerCode"
            placeholder="层高"
            :options="layerCodeList"
         
          />
          
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item name="inWeight">
          <template #label>
            <span>
              入堆量
              <a-tooltip v-if="false">
                <template #title></template>
                <QuestionCircleOutlined />
              </a-tooltip>
              <span>：</span>
            </span>
          </template>
          <a-input-number v-model:value="item.inWeight" :precision="2"  style="width: 100%"  placeholder="请输入堆量（t）"  allow-clear />  
            
        </a-form-item>
      </a-col>
      <a-col :span="6">
        <a-form-item name="">
        <template #label>
            <span>
              操作
              <a-tooltip v-if="false">
                <template #title></template>
                <QuestionCircleOutlined />
              </a-tooltip>
              <span>：</span>
            </span>
          </template>
        <a-button danger ghost @click="handleDeleteRow(index)">删除</a-button>
      </a-form-item>
      </a-col>
      <a-divider />

    </a-row>


  </a-form>
</template>

<script setup name="PrWeightRecodsForm">
import { reactive, ref } from 'vue';

const props = defineProps({
  // 表单数据
  form: Object,
  managerCodeList:{
    default:()=>[]
  },
  layerCodeList:{
    default:()=>[]
  },
  prWeightSumOrderList:{
    default:()=>[]
  }
});



const emits = defineEmits(['addRecord','deleteRecord','changewtSumId'])

// 验证规则
const rules = reactive({
 
  wtSumId: [{ required: true,  message: '请选择汇总单号', type: 'string', trigger: 'blur' }],
  forecastQnetar: [
    { required: true, 
      message: '请填写预报热值', 
      trigger: 'blur', 
      type: 'number',
      validator: (rule, value) => {
        // console.log(value);
        return new Promise((resolve, reject) => {
          if (value > 0) {
            resolve();
          } else {
            reject(new Error('预报热值必须大于0'));
          }
        });
      }
    }
  ],
  forecastStd: [
    { required: true, 
      message: '请填写预报干基硫分', 
      trigger: 'blur', 
      type: 'number',
      validator: (rule, value) => {
        // console.log(value);
        return new Promise((resolve, reject) => {
          if (value > 0) {
            resolve();
          } else {
            reject(new Error('预报干基硫分必须大于0'));
          }
        });
      }
    }
  ],
  notdidWeight: [
    { required: true, 
      message: '未分量只能等于0', 
      trigger: 'blur', 
      type: 'number',
      validator: (rule, value) => {
        // console.log(value);
        return new Promise((resolve, reject) => {
          if (value === 0) {
            resolve();
          } else {
            reject(new Error('未分量只能等于0'));
          }
        });
      }
    }
  ],

  coalQuantitys: [
    {
      required: true,
      message: '必须填写入堆量',
      trigger: 'blur',
      validator: (rule, value) => {
        console.log(value);
        return value.every(item => item.InWeight > 0); // 检查入堆量是否大于0
      },
    },
    {
      required: true,
      message: '必须选择层高',
      trigger: 'change',
      validator: (rule, value) => {
        return value.every(item => item.LayerCode); // 检查每个项的层高是否已选择
      },
    },
    {
      required: true,
      message: '必须选择区域',
      trigger: 'change',
      validator: (rule, value) => {
        return value.every(item => item.ManagerCode); // 检查每个项的区域是否已选择
      },
    },
  ],
});



  /**
   * 新增行
   */
const handleAddRow = () => {
  var arr ={managerCode:'', layerCode:'', inWeight:''};
  // 因为vue是单向，需要返回父级新增

   emits('addRecord',arr)
  };


// 删除行数据
const handleDeleteRow = (index)=>{
  emits('deleteRecord',index)
}



   const handleChangewtSumId = (value) => {
   emits('changewtSumId',value)
  };




defineExpose({
})
</script>

<style>
</style>
